import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { DNavBar, DCheckOpinion, DLookImages } from '@/components'
import './index.scss'
import http from '@/api'

export default class InventoryManageDetail extends Component {
  state = {
    carIcon: require('@/assets/images/car_icon.png'),
    fileIcon: require('@/assets/images/file_icon.png'),
    opinions: [
      {
        name: '继续盘库',
        value: 'success',
      }, {
        name: '订单完成',
        value: 'fail',
      }],
    detail: {},
    basicInfo: [],
    carInfo: [],
    imageList: [],
    previewImg: {
      itemStatus: false,
      itemUrl: ''
    },
  }

  componentDidMount () {
    this.getStocktaking()
  }

  getStocktaking () {
    http.getStocktaking(this.$router.params.id).then((data) => {
      let infoData = {
        ...data.info,
        ...data.carAdvanceMoneyApply,
      }

      let imageList = this.handleImages(data.detail)

      this.handleInfo(infoData)
      this.setState({ detail: infoData, imageList, status: data.info.status })
    })
  }

  handleInfo (detail) {
    const basicInfoMap = {
      'orderNo': '关联订单号',
      'stocktakingArea': '所在地区',
      'startTime': '盘库起始日期',
      'endTime': '盘库结束日期',
      'companyName': '盘库企业',
      'carType': '盘库车型',
    }
    const carInfoMap = {
      'outColor': '外观颜色',
      'inColor': '内饰颜色',
      'vin': '车架号',
      'amLogisStart': '物流始发地',
      'amLogisEnd': '物流目的地',
    }

    let basicInfo = []
    let carInfo = []

    Object.keys(basicInfoMap).forEach(key => {
      basicInfo.push({
        label: basicInfoMap[key],
        value: detail[key] || '--',
      })
    })
    Object.keys(carInfoMap).forEach(key => {
      carInfo.push({
        label: carInfoMap[key],
        value: detail[key] || '--',
      })
    })

    this.setState({ basicInfo, carInfo })
  }

  handleImages (list) {
    let imageList = list.map((item) => {
      let isPanku
      if (item.status == 1 || item.status == 3) {
        isPanku = false
      } else if (item.status == 2 || item.status == 4) {
        isPanku = true
      }
      let objectTemp = {
        stocktakingArea: item.stocktakingArea,
        stocktakingDate: item.stocktakingDate,
        carImg: [],
        carinImg: [],
        infoImg: [],
        abnormalImg: [],
        isPanku,
        updator: item.updator,
      }
      item.carStocktakingFiles.forEach((imgObj) => {
        let obj = {}
        if (imgObj.imgType === 1) {
          obj['url'] = imgObj.imgAliyunUrl
          obj['deg'] = imgObj.imgTitle
          objectTemp.carImg.push(obj)
        } else if (imgObj.imgType === 2) {
          obj['url'] = imgObj.imgAliyunUrl
          obj['deg'] = imgObj.imgTitle
          objectTemp.carinImg.push(obj)
        } else if (imgObj.imgType === 3) {
          obj['url'] = imgObj.imgAliyunUrl
          obj['deg'] = imgObj.imgTitle
          objectTemp.infoImg.push(obj)
        } else if (imgObj.imgType === 4) {
          obj['url'] = imgObj.imgAliyunUrl
          obj['deg'] = imgObj.imgTitle
          objectTemp.abnormalImg.push(obj)
        }
      })

      return objectTemp
    })

    return imageList
  }

  handleStatusText (status) {
    return {
      1: '待盘库',
      2: '已盘库',
      // 3: '继续盘库',
      3: '待盘库',
      4: '订单完成',
    }[status]
  }

  handleStatusBarClass (status) {
    return {
      1: 'no-pass',
      2: 'pass',
      // 3: '继续盘库',
      3: 'no-pass',
      4: 'pass',
    }[status]
  }

  confirmPanku (id) {
    http.confirmPanku(id).then(() => {
      Taro.showToast({
        title: '确认成功',
        icon: 'success',
      })
      setTimeout(Taro.navigateBack, 2000)
    })
  }

  continuePanku (id) {
    http.continuePanku(id).then(({ data }) => {
      Taro.showToast({
        title: '确认成功',
        icon: 'success',
      })
      setTimeout(Taro.navigateBack, 2000)
    })
  }

  handleConfirm = ({ checkOpinion }) => {
    Taro.showModal({
      title: '提示',
      content: '是否确认提交该信息',
      success: ({ confirm }) => {
        if (confirm) {
          if (checkOpinion === 'success') {
            // 继续盘库
            this.continuePanku(this.$router.params.id)
          } else {
            // 订单完成
            this.confirmPanku(this.$router.params.id)
          }
        }
      },
    })
  }
  // 图片预览
  onLookHandle(url) {
    if (window.bridge) {
      let _images = [], i = 0
      _images.push(url)
      window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
    } else {
      this.setState({
        previewImg: {
          itemStatus: true,
          itemUrl: url
        }
      })
    }
  }
  onLookItem() {
    this.setState({
      previewImg: {
        ...this.state.previewImg,
        itemStatus: false,
        itemUrl: ''
      }
    })
  }

  render () {
    const {
      opinions,
      fileIcon,
      carIcon,
      basicInfo,
      carInfo,
      detail,
      imageList,
      status,
      previewImg
    } = this.state

    return (
      <View className="inventory-manage-detail">
        <DNavBar title="盘库管理详情"></DNavBar>

        <View className={['status_bar', this.handleStatusBarClass(status)].join(
          ' ')}>{this.handleStatusText(status)}</View>

        <View className="info">
          <View className="title">
            <Image src={fileIcon} className="title_icon"></Image>
            <Text className="title_text">基本信息</Text>
          </View>
          {
            basicInfo.map(item => <View className="item">
              <View className="label">{item.label}</View>
              <View className="value">{item.value}</View>
            </View>)
          }

          <View className="title">
            <Image src={carIcon} className="title_icon"></Image>
            <Text className="title_text">车辆信息</Text>
          </View>
          {
            carInfo.map(item => <View className="item">
              <View className="label">{item.label}</View>
              <View className="value">{item.value}</View>
            </View>)
          }

          {
            imageList.map(item => (
              <View>
                <View className="border"></View>
                <View className="sub">
                  <View className="label">盘库时间：{item.stocktakingDate}</View>
                  <View className="value">盘库人：{item.updator}</View>
                </View>
                <View className="photo_item">
                  <View className="photo_label">车辆外观</View>
                  <View className="photo_value">
                    {
                      item.carImg.map(img => <Image className="photo" src={img.url} onClick={this.onLookHandle.bind(this, img.url)}></Image>)
                    }
                  </View>
                </View>
                <View className="photo_item">
                  <View className="photo_label">车内照片</View>
                  <View className="photo_value">
                    {
                      item.carinImg.map(img => <Image className="photo" src={img.url} onClick={this.onLookHandle.bind(this, img.url)}></Image>)
                    }
                  </View>
                </View>
                <View className="photo_item">
                  <View className="photo_label">车辆信息</View>
                  <View className="photo_value">
                    {
                      item.infoImg.map(img => <Image className="photo" src={img.url} onClick={this.onLookHandle.bind(this, img.url)}></Image>)
                    }
                  </View>
                </View>
                {
                  item.abnormalImg.length > 0 && <View className="photo_item">
                    <View className="photo_label">异常照片</View>
                    <View className="photo_value">
                      {
                        item.abnormalImg.map(img => <Image className="photo" src={img.url} onClick={this.onLookHandle.bind(this, img.url)}></Image>)
                      }
                    </View>
                  </View>
                }
                <View className="photo_item">
                  <View className="photo_label">用户位置</View>
                  <View className="photo_value">{item.stocktakingArea}</View>
                </View>
              </View>
            ))
          }
        </View>

        {
          status == 2 && <View>
            <View className="border"></View>
            <DCheckOpinion type="panKu" opinions={opinions} onCancel={Taro.navigateBack} onConfirm={this.handleConfirm}/>
          </View>
        }

        <DLookImages status={previewImg.itemStatus} url={previewImg.itemUrl} onLookHandle={this.onLookItem.bind(this)}></DLookImages>

      </View>
    )
  }
}
